<template lang="pug">
  .homepart
    div.mbx
      span.ml24 营养食谱
      div(@click="$router.push('/childCare/cookbook/brief')")
        span 食谱管理
        img(src="@/assets/right.png")
    .mediaBox
      .media
        img( v-if="list.length > 0" :src="list[0].resURL")
        div(v-else) 暂时没有食谱
</template>
<script>
import { getBriefList } from '../cookbook/api'
export default {
  data () {
    return {
      list: []
    }
  },
  created () {
    this.getData()
  },
  methods: {
    getData () {
      getBriefList().then(res => {
        console.log(res)
        this.list = res.content
      })
    }
  }
}
</script>

<style lang="scss" scoped>
  .mediaBox{
    .media {
      position: relative;
      height: 332px;

      > img {
        width: 100%;
        height: 100%;
      }
    }
  }
  .homepart{
    padding: 24px;
    border-radius: 8px;
    ::v-deep{
      .quikBox {
        padding: 16px 24px;
        border-radius: 4px;
        display: flex;
        align-items: center;
        img{
          width: 32px !important;
          height: 32px !important;
          margin: 0;
        }
        .title{
          margin-left: 24px;
        }
        span{
          margin-left: 24px;
        }
      }
    }
  }
</style>
